<template>
  <!-- 上传凭证 -->
  <el-dialog
    v-model="dialogVisible"
    title="上传凭证"
    width="40%"
    :before-close="handleClose"
  >
    <el-form
      v-loading="loading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="large"
      label-position="right"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="需缴纳保证金额">
            {{ filters.thousands(ruleForm.amount) }} 元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公式">
            {{ ruleForm.expression }}
            <c-voucher-details
              v-if="carDetails && carDetails.length > 0"
              :list="carDetails"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="保证金支付凭证"
            prop="files"
            class="el-form--label-top"
          >
            <c-file-upload :limit="1" v-model="ruleForm.files" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" :loading="buttonLoading" @click="handleClose"
        >取消</el-button
      >
      <el-button
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import cFileUpload from "@/components/Upload/FileUpload.vue";
import cVoucherDetails from "@/components/PaymentDetails/index.vue";
import { ElMessage } from "element-plus";
import { deepClone } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["change"]);
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
  files: [],
});
const loading = ref(false);
const buttonLoading = ref(false);
const carDetails = ref([]);
const handleOpen = (item) => {
  loading.value = true;
  const url = "/sellerCarInApply/getById";
  const params = {
    id: item.id,
  };
  proxy
    .$get({
      url: "/sellerCarInApply/carDetails",
      params,
    })
    .then((res) => {
      carDetails.value = res;
    });
  proxy.$get({ url, params }).then((res) => {
    // 费用类别(1-保证金，2-贷款，3-利息)
    const sellerBillItem = res.sellerBill.find((x) => {
      return x.type === 1;
    });
    if (sellerBillItem) {
      ruleForm.value.amount = sellerBillItem.amount;
      ruleForm.value.expression = sellerBillItem.expression;
      ruleForm.value.id = sellerBillItem.id;
    }

    loading.value = false;
  });
  dialogVisible.value = true;
};
const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      const url = "/sellerBill/uploadDeposit";
      const data = deepClone(ruleForm.value);
      data.file = data.files[0];
      proxy.$post({ url, data }).then(
        (res) => {
          ElMessage.success("操作成功");
          emits("change");
          buttonLoading.value = false;
          handleClose();
        },
        () => {
          buttonLoading.value = false;
        }
      );
    }
  });
};
const handleClose = () => {
  ruleForm.value = {
    id: null,
    files: [],
  };
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};
const rules = ref({
  files: [
    {
      type: "array",
      required: true,
      message: "请选择保证金支付凭证",
      trigger: "change",
    },
  ],
});
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
:deep(.el-form-item.el-form--label-top) {
  display: block;
}
</style>